<?xml version="1.0" encoding="UTF-8" ?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                template="/WEB-INF/templates/general.xhtml">
       
        <ui:define name="title"><h:outputText value="Please Sign Up" /></ui:define>        
        <ui:define name="header"><h:outputText value="Please Sign Up" /></ui:define>
       
        <ui:define name="content">
			<h:form id="singUpForm">
				<p:fieldset styleClass="fieldset" legend="Registration Form">
					<p:messages id="messages" />
				
					<h:panelGrid id="regPanelGrid" style="margin: 0 auto; margin-top: 25p; text-align: right" cellspacing="8" columns="3">
						
						<h:panelGroup>
							<h:outputText value="First Name:" />
							<h:outputText style="color:red" value="* " />
						</h:panelGroup>
						<p:inputText id="firstName" label="First Name"  value="#{user.firstName}" required="true" title="Enter Your First Name!" >
							<f:validateLength minimun="2" />
						</p:inputText>
						<p:tooltip for="firstName" styleClass="tooltip" showEvent="focus" hideEvent="blur" />
						
						<h:panelGroup>
							<h:outputText value="Last Name:" />
							<h:outputText style="color:red" value="* " />
						</h:panelGroup>
						<p:inputText id="lastName" label="Last Name"  value="#{user.lastName}" required="true" title="Enter Your Last Name!" >
							<f:validateLength minimun="2" />
						</p:inputText>
						<p:tooltip for="lastName" styleClass="tooltip" showEvent="focus" hideEvent="blur" />
						
						<h:panelGroup>
							<h:outputText value="User Name:" />
							<h:outputText style="color:red" value="* " />
						</h:panelGroup>
						<p:inputText id="userName" value="#{user.userName}" required="true" label="User Name" title="Enter Your User Name!" >
							<f:validateLength minimun="2" />
						</p:inputText>
						<p:tooltip for="userName" styleClass="tooltip" showEvent="focus" hideEvent="blur" />
						
						<h:panelGroup>
							<h:outputText value="Enter Password:" />
							<h:outputText style="color:red" value="* " />
						</h:panelGroup>
						<p:password id="pass1" value="#{user.password}" required="true" label="Password" title="Please enter a password!" feedback="true" match="pass2">
							<f:validateLength minimun="2" />
						</p:password>
						<h:outputText value="" />
						
						<h:panelGroup>
							<h:outputText value="Repeat Password:" />
							<h:outputText style="color:red" value="* " />
						</h:panelGroup>
						<p:password id="pass2" required="true" label="Password" title="Please repeat a password!" />
						<h:outputText value="" />						
						
						<p:commandButton id="backToSignIn" action="backToSignIn" immediate="true" icon="ui-icon-arrowreturnthick-1-w" value="Back To Sign In"/>
						<p:commandButton id="submitButton" action="confirmSignUp" update="regPanelGrid,messages" icon="ui-icon-check" value="Sign Up"/>						
					</h:panelGrid>
				</p:fieldset>
			</h:form>
		</ui:define>
       
</ui:composition>
